<!--
 * @Description: 首页-调研统计页面
-->
<template>
  <div class="research-statistics">
    <div class="statistics-header">
      <div>
        所属年度：
        <el-date-picker
          v-model="selectedDate"
          size="small"
          type="year"
          placeholder="选择年份"
          :format="DEFAULT_YEAR_FORMAT"
          :value-format="DEFAULT_YEAR_FORMAT"
          :clearable="false"
          style="margin-right: 10px"
        />
      </div>
      <div class="header-buttons">
        <el-button :loading="loading" size="small" type="primary" @click="query">查询</el-button>
        <el-button size="small" @click="reset">重置</el-button>
        <el-button
        v-if="showBtn"
        size="small"
        icon="el-icon-tickets"
        type="primary"
        @click="draftDraft(template)">发起调研安排</el-button>
      </div>
    </div>
    <!-- 标签页 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane
      v-for="tab in tableData"
      :key="tab.leadingUserId"
      :label="tab.leadingUserName"
      :name="tab.leadingUserId" />
    </el-tabs>
    <jdf-dynamic-table
      ref="dynamicTable"
      v-model="currentTableData"
      :loading="loading"
      :tableDataOption="tableDataOption"
      title-align="center"
      :serialNoCol="false"
      :span-method="spanMethod"
      :isEdit="false"
    />
    <!-- 起草时多身份选人 -->
    <jdf-select-identity
      ref="selectIdentity"
      v-model="selectIdentityId"
      :identity-list="identityList"
      notice-text="请选择人员身份"
      @choose="chooseDraft"
    ></jdf-select-identity>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import ResearchFormService from '@/api/domains/ResearchFormService';
import { DEFAULT_YEAR_FORMAT } from '@/utils/constants';
import { isCompanyLeader } from '@/utils/utils';
import { showErrorMsg } from '@/api/utils/pc-message';
import draftMixins from '@/mixins/draftMixins';
import switchIdentItiesMixin from '@/mixins/switchIdentItiesMixin';
import { mapGetters } from 'vuex';
import statisticsMixins from '@/mixins/statisticsMixins';

export default {
  name: 'WorkStatistics',
  mixins: [draftMixins, switchIdentItiesMixin, statisticsMixins],
  data() {
    return {
      DEFAULT_YEAR_FORMAT,
      dayjs,
      researchLedgers: [],
      // 日期选择器不支持数字 转成字符串
      selectedDate: this.currentYear(),
      loading: false,
      identityList: [],
      draftVisible: true,
      selectIdentityId: '',
      template: {
        processDefinitionKey: 'researchWorkPlan',
        processDefinitionName: '调研工作开展情况',
      },
    };
  },
  computed: {
    ...mapGetters(['loginName', 'identityId']),
    showBtn() {
      return isCompanyLeader();
    },
  },
  mounted() {
    this.query();
  },
  methods: {
    /**
     * 起草调研安排
     */
    chooseDraft() {
      const {
        selectIdentityId,
        template: { processDefinitionKey, processDefinitionName },
      } = this;
      this.draftProcess(processDefinitionKey, processDefinitionName, selectIdentityId, {}, '/process-form');
    },
    /**
     * 获取表格数据
     */
    async getTableData() {
      this.loading = true;
      try {
        const { userId, selectedDate } = this;
        const leaderPlanList = await new ResearchFormService().getLeaderPlanList({
          year: selectedDate,
          userId: isCompanyLeader() ? userId : '',
        });
        this.researchLedgers = leaderPlanList ?? [];
      } catch (error) {
        showErrorMsg(error);
      } finally {
        this.loading = false;
      }
    },
    /**
     * 重置
     */
    reset() {
      this.selectedDate = this.currentYear();
      this.query();
    },
    /**
     * 查询表格数据
     */
    async query() {
      await this.getTableData();
      this.fetchTableData();
    },
    /**
     * 当前年份
     */
    currentYear() {
      return String(dayjs().year());
    },
  },
};
</script>
<style lang="scss" scoped>
.statistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 10px;
}
</style>
